<html xmlns:th="http://www.thymeleaf.org">
<head>
<%--  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">--%>
<%--  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>--%>
<%--  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>--%>
<%--  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>--%>
  <title>登录</title>
  <!-- Bootstrap -->
  <link href="/static/bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
  <!--jQuery-->
  <script type="text/javascript" src="/static/jquery/jquery-3.6.0.js"></script>
  <script type="text/javascript" src="/static/bootstrap/js/bootstrap.bundle.js"></script>

</head>
<body>

<div class="container">
  <div class="row">
    <form class="form-horizontal login_form">
      <h1 style="margin-top: 50px">NIIT学生管理系统</h1>
      <div class="form-group" style="margin-top: 35px">
        <div class="col-sm-10" style="margin: auto auto">
          <input name="username" type="text" class="form-control" id="inputUser" placeholder="账号">
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-10" style="margin: auto auto">
          <input name="password" type="password" class="form-control" id="inputPassword" placeholder="密码">
        </div>
      </div>
      <div class="form-group">
        <select name="type" class="col-sm-8" style="margin: auto auto; height: 50px" id="inputState" class="form-control">
          <option selected value="2">学生</option>
          <option value="1">老师</option>
          <option value="0">管理员</option>
        </select>
      </div>

      <div class="form-group" style="margin-top: 35px">
        <div>
          <button type="button" class="btn btn-primary" id="login_btn">登&nbsp;录</button>
          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">注&nbsp;册</button>
        </div>
      </div>
    </form>
  </div>
</div>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">注册</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form class="form-horizontal register_form">
          <div class="form-group" style="margin-top: 35px">
            <div class="col-sm-10" style="margin: auto auto">
              <input name="username" type="text" class="form-control" id="regUserName" placeholder="账号">
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-10" style="margin: auto auto">
              <input name="password" type="password" class="form-control" id="regPassword" placeholder="密码">
            </div>
          </div>
          <div class="form-group">
            <select name="type" class="col-sm-8" style="margin-left: 80px; height: 50px;" id="regState" class="form-control">
              <option selected value="2">学生</option>
              <option value="1">老师</option>
            </select>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" id="reg_commit">注册</button>
      </div>
    </div>
  </div>
</div>

</body>
</html>
<script type="text/javascript" th:inline="javascript">

  $("#reg_commit").click(function (){
    if($("#regState").val() === "1"){
      $.ajax({
        url: "${APP_PATH}/getTeacherByName",
        data: {"name": $("#regUserName").val() },
        method: "POST",
        success: function (res){
          var data = JSON.parse(res)
          console.log(data)
          if(data.code === 200){
            alert("该老师已存在")
          }else if(data.code === 202){
            $.ajax({
              url: "${APP_PATH}/userRegister",
              method: "POST",
              data: $(".register_form").serialize(),
              success: function (json){
                var res = JSON.parse(json)
                console.log(res)
                console.log(res.code)
                if(res.code === 200){
                  alert("注册成功")
                  $("#regUserName").val("")
                  $("#regPassword").val("")
                  $("#staticBackdrop").modal('hide')
                }
              }
            })
          }
        }
      })
    }

    if($("#regState").val() === "2"){

      var pattern=/^\d+$/g
      if(!pattern.test($("#regUserName").val())){
        alert("账号为学号，必须为数字")
        return
      }

      if($("#regUserName").val().length > 10){
        alert("账号长度不可超过10位")
        return;
      }

      $.ajax({
        url: "${APP_PATH}/getStudentById",
        data: {"studentId": $("#regUserName").val() },
        method: "POST",
        success: function (res){
          var data = JSON.parse(res)
          console.log(data)
          if(data.code === 200){
            alert("该学生已存在")
          }else if(data.code === 202){
            $.ajax({
              url: "${APP_PATH}/userRegister",
              method: "POST",
              data: $(".register_form").serialize(),
              success: function (json){
                var res = JSON.parse(json)
                console.log(res)
                console.log(res.code)
                if(res.code === 200){
                  alert("注册成功")
                  $("#regUserName").val("")
                  $("#regPassword").val("")
                  $("#staticBackdrop").modal('hide')
                }
              }
            })
          }
        }
      })
    }

  })

  // 监听登录按钮
  $("#login_btn").click(function (){
    $.ajax({
      // 这个 /login 就是controller抛出的访问路径饿呢n
      url: "${APP_PATH}/login",
      method: "POST",
      data: $(".login_form").serialize(),
      success: function (res){
        // var res = JSON.parse(json)
        console.log(res)
        console.log(res.code)
        if(res.code === 200){
          alert("登录成功")
        }else {
          alert("登录失败")
        }
      }
    })
  })
</script>
<style>
  body{
    background: #2b669a;
  }
  .login_form{
    height: 500px;
    width: 800px;
    margin: 100px auto;
    text-align: center;
    border-radius: 10%;
    background: rgba(255,255,255,0.7);
  }
</style>
